<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <a-modal
        width="1000px"
        v-model="detailsVisible"
        title="详情信息"
        @cancel="() => ((this.detailsVisible = false))"
        @ok="onSubmit"
        destroyOnClose
      >
        <div id="modalContent">
          <Details :id="currentId" :code="form.code"></Details>
        </div>
        <template slot="footer">
          <Button type="reset" label="关闭" @click="()=>{ this.detailsVisible = false }"></Button>
        </template>
      </a-modal>

      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">设备运行状况</div>
        </div>
        <div class="tableList">
          <typicalTable ref="insideTable" :tableConfig="tableConfig" :tableData="tableData" @getTableData="getTableData">
            <template v-slot="slotProps">
              <Button label="详情" @click="handleEdit(slotProps.record)"></Button>
            </template>
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import treeSelect from '@/components/typicalControl/treeSelect';
import Select from '@/components/typicalControl/select';
import Button from '@/components/typicalControl/button';
import Details from '@/views/equipmentControl/parameterSending/details.vue';
import { getYesNo } from '@/utils/frequentInterface';

import { equipmentMonitoring ,listNetworksAll} from '@/api/cabin';
import { organizationsTree } from '@/api/system';

export default {
  name: 'RunningState',
  components: {
    typicalSearch: typicalSearch,
    typicalTable: typicalTable,
    Input: Input,
    InputNumber: InputNumber,
    treeSelect: treeSelect,
    Select: Select,
    Button: Button,
    Details: Details
  },
  data() {
    return {
      roleLoading: false, // 加载表格的loading
      detailsVisible: false,
       form: {},
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'selectTree',
            prop: 'searchOrganizationId',
            value: undefined,
            label: '所属组织',
            treeData: [],
            change: this.searchOptListDynamicLoading,
          },
          {
            type: 'select',
            prop: 'searchNetworkId',
            value: undefined,
            label: '场站网点',
            optList: []
          },
          {
            type: 'input',
            prop: 'searchKeyWord',
            value: '',
            label: '名称或编码'
          },
          
          {
            type: 'select',
            prop: 'searchIsOnline',
            value: undefined,
            label: '联网状态',
            optList: []
          }
        ],
        parent: this
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '场站网点',
            dataIndex: 'chargingNetworkName',
            ellipsis: true
          },
          {
            title: '充电柜编号',
            dataIndex: 'code',
            ellipsis: true
          },
          {
            title: '充电柜名称',
            dataIndex: 'name',
            ellipsis: true
          },
          {
            title: '组织机构',
            dataIndex: 'organizationName',
            ellipsis: true
          },
          {
            title: '设备型号',
            dataIndex: 'chargingCabinetModeName',
            ellipsis: true
          },
          {
            title: '设备类型',
            dataIndex: 'chargingCabinetTypeName',
            ellipsis: true
          },
          {
            title: '备注',
            dataIndex: 'remark',
            ellipsis: true
          },
          {
            title: '状态',
            dataIndex: 'isEnable',
            width: '60px',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '联网状态',
            dataIndex: 'isOnline',
            scopedSlots: { customRender: 'isYesNo' },
            width: '80px',
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0
      },
      currentId: '',
      oDictionary: {
        listNetworksAll: [],
      },
    };
  },
  created() {
    this.getDictionary();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    /**
     * [getDictionary 获取各种字典]
     * @return {[type]} [description]
     */
    getDictionary() {
      // 组织列表树形结构数据
      organizationsTree().then(res => {
        if (res.code == 200) {
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop === 'searchOrganizationId') {
              this.searchConfig.formItemList[i].treeData = res.data;
              break;
            }
          }
        }
      });
      // 场站网点
       this.getNetworkData();
      // 联网状态，前端处理增加枚举2的类型
      for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
        if (this.searchConfig.formItemList[i].prop === 'searchIsOnline') {
          this.searchConfig.formItemList[i].optList = getYesNo();
          break;
        };
      }
    },
    getNetworkData(organizationId){
       // 场站网点
      listNetworksAll(`/selectChargingnetwork`, 'get', { pageNum: 1, pageSize: 100,organizationId: organizationId}).then((res) => {
        if (res.code == 200) {
          this.oDictionary.listNetworksAll = res.data.records.map((n) => {
            return {
              name: n.name,
              code: n.id,
            };
          });
          for (var i = 0; i < this.searchConfig.formItemList.length; i++) {
            if (this.searchConfig.formItemList[i].prop == 'searchNetworkId') {
              this.searchConfig.formItemList[i].optList = this.oDictionary.listNetworksAll;
              break;
            }
          }
        }
      });
    },
    /**
     * [searchOptListDynamicLoading 搜索下拉动态加载]
     * @param  {[type]} searchOrganizationId [组织机构id]
     * @return {[type]}                      [description]
     */
    searchOptListDynamicLoading(searchOrganizationId) {
      this.oDictionary.listNetworksAll = [];
      this.getNetworkData(searchOrganizationId);
    },
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      searchParam.searchDataRang = 9;
      let params = {
        pageNum: searchParam&&searchParam.pageNumber?searchParam.pageNumber+1:1,
        pageSize: searchParam.pageSize,
        chargingNetworkId: searchParam.searchNetworkId,
        isOnline: searchParam.searchIsOnline,
        nameAndCode: searchParam.searchKeyWord,
        organizationId: searchParam.searchOrganizationId,
      };
      equipmentMonitoring('/selectRunStatusAll', 'get', params).then(res => {
        if (res.code == 200) {
          let params = {
              records: res.data.records,
              total: Number(res.data.total),
            };
          this.tableData = params;
        } else {
          this.tableData.records = [];
          this.tableData.total = 0;
        }
      }).finally(() => {
        this.roleLoading = false;
      });
    },
    /**
     * @description: 新增编辑设备信息表单提交
     */
    onSubmit() {
      this.detailsVisible = false;
    },

    /**
     * [handleEdit 打开详情]
     * @param  {[type]} row          [当前行数据]
     * @return {[type]}              [description]
     */
    handleEdit(row) {
      this.currentId = row.id;
      this.detailsVisible = true;
      this.form =row;
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    }
  }
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 80%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
#modalContent {
  width: 100%;
  height: 550px;
  overflow: auto;
  position: relative;
}

</style>
